<template>
    <el-drawer :close-on-click-modal="false" class="hm-drawer" size="70%" direction="rtl" v-model="show" :before-close="handleClose">
        <template #header>
            <div class="hm-box-title">选品记录</div>
        </template>
        <div class="hm-form-title" >商品信息</div>
        <div class="product_information">
            <el-row class="hm-row3" :gutter="60">
                <el-col :span="8" class="label_value">
                    <div class="label">商品名称:</div>
                    <div class="value">{{ selectionRecordData.styleName }}</div>
                </el-col>
                <el-col :span="8" class="label_value">
                    <div class="label">类目:</div>
                    <div class="value">{{ selectionRecordData.categoryName }}</div>
                </el-col>
                <el-col :span="8" class="label_value">
                    <div class="label">商品编码:</div>
                    <div class="value">{{ selectionRecordData.styleCode }}</div>
                </el-col>
            </el-row>
            <el-row class="hm-row3" :gutter="60">
                <el-col :span="8" class="label_value">
                    <div class="label">招商部门:</div>
                    <div class="value">{{ selectionRecordData.recruiterDept }}</div>
                </el-col>
                <el-col :span="8" class="label_value">
                    <div class="label">招商员:</div>
                    <div class="value">{{ selectionRecordData.recruiter }}</div>
                </el-col>
                <el-col :span="8" class="label_value">
                    <div class="label">产品部门:</div>
                    <div class="value">{{ selectionRecordData.proDept }}</div>
                </el-col>
            </el-row>
            <el-row class="hm-row3" :gutter="60">
                <el-col :span="8" class="label_value">
                    <div class="label">品牌:</div>
                    <div class="value">{{ selectionRecordData.brand }}</div>
                </el-col>
                <el-col :span="8" class="label_value">
                    <div class="label">机制:</div>
                    <div class="value">{{ selectionRecordData.liveStreamingMechanism }}</div>
                </el-col>
                <el-col :span="8" class="label_value">
                    <div class="label">佣金:</div>
                    <div class="value">{{ selectionRecordData.commission }}</div>
                </el-col>
            </el-row>
        </div>
        <div class="hm-form-title" >选品历史</div>
        <div class="selection_history">
            <el-table :data="selectionRecordData.datas">
                <el-table-column label="选品部门" align="center" prop="choosePerson" />
                <el-table-column label="选品时间" align="center" prop="choosePersonTimes" />
                <el-table-column label="归还时间" align="center" prop="returnTimes" />
                <el-table-column label="是否售卖" align="center" prop="sellingFlag" />
                <el-table-column label="售卖时间" align="center" prop="sellingTimes" />
                <el-table-column label="合作方式" align="center" prop="cooperationMode" />
                <el-table-column label="机制" align="center" prop="liveStreamingMechanism" />
                <el-table-column label="佣金" align="center" prop="commission" />
            </el-table>
        </div>
        <template #footer>
            <div style="flex: auto">
                <el-button type="primary" @click="confirmClick">关闭</el-button>
            </div>
        </template>
    </el-drawer>
</template>
<script setup name="SelectionRecord" lang="ts">

const props = defineProps({
    selectionRecordVisible: {
        type: Boolean,
        default: false
    },
    selectionRecordData: {
        type: Object,
        default: false
    }
});
const show = computed(() => props.selectionRecordVisible);
const emits = defineEmits(['doClose'])
const handleClose = () => {
    emits('doClose')
}


/** 到样确认 */
const confirmClick = () =>{
    handleClose()
}
</script>
<style scoped lang="scss">

.hm-form-title {
  font-size: 16px;
  font-weight: bold;
  color: #1a1b1c;
}
.hm-box-title {
  font-size: 21px;
  font-weight: bold;
  color: #1a1b1c;
  padding-bottom: 24px;
  border-bottom: 1px solid #f3f3f7;
}
.product_information{
    padding: 20px 20px;
}
.label{
    text-align: right;
    width: 120px;
}
.value{
    margin-left: 20px;
}
.label_value{
    display: flex;
    align-items: center;
    margin-top: 20px;
}
.selection_history{
    margin-top: 20px;
}
</style>